<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #bg{
            width: 980px;
            height: 617px;
            background: url(../images/bg.jpg) no-repeat;
            margin:0  auto;
            padding-top: 10px;
        }
        .nav{
            width: 848px;
            height: 45px;
            background: url(../images/nav.png) no-repeat;
            margin: 0 auto;
            padding: 40px 0 0 123px;
        }
        .nav span{
            color: #685649;
            font-size: 16px;
            padding: 0 30px;
        }
        .nav .margin_more{
            margin-right: 240px;
        } 

        #news{
            width: 980px;
            height: 300px;
            margin: 18px auto;
            padding-top: 120px;
        }
        .news_con{
            width: 294px;
            height: 256px;
            float: left;
            margin-left: 29px;
        }
        .one{
            width: 284px;
            height: 50px;
            padding-left: 10px;
            line-height: 50px;
            font-weight: bold;
            font-size: 16px;
            border-bottom: 1px solid #ddd;
        }
        .two{
            width: 284px;
            height: 70px;
            line-height: 20px;
            padding: 10px 0 0 10px;
            font-size: 12px;
            color: #bbb;
        }
        .shadow{
            width: 294px;
            height: 5px;
        }
        
        #exhibition{
            width: 980px;
            height: 292px;
            background: url(../images/xinshang.jpg) no-repeat;
            margin: 0 auto;
            padding-top: 170px;
        }
        #exhibition .pic{
            width: 916px;
            height: 260px;
            margin: 0 auto;
        }
        #exhibition .pic img{
            margin-left: 56px;
        }
    </style>
</head>
<body>
    <div id="bg">
        <div class="nav">
            <span>网站首页</span>
            <span class="margin_more">关于我们</span>
            <span>摄影作品</span>
            <span>联系我们</span>
        </div>
    </div>

    <div id="news">
        <div class="news_con">
            <img src="news1.jpg" alt="">
            <h2 class="one">优惠活动</h2>
            <p class="two">新年订单有特大惊喜</p>
            <p class="shadow"></p>
        </div>
        <div class="news_con">
            <img src="news2.jpg" alt="">
            <h2 class="one">宝贝写真应该注意什么？</h2>
            <p class="two">孩子拍摄的时候如果是陌生人接触的话会比较容易哭闹，如果换做是亲近的或者比较平时比较熟悉玩得来的就会好很多</p>
            <p class="shadow"></p>
        </div>
        <div class="news_con">
            <img src="news3.jpg" alt="">
            <h2 class="one">宝贝庆生会</h2>
            <p class="two">为新生宝宝准备的生日party，参加者可获得精美生日礼物一份。</p>
            <p class="shadow"></p>
        </div>

    <div id="exhibition">
        <div class="pic">
            <img src="img1.jpg" alt="">
            <img src="img2.jpg" alt="">
            <img src="img3.jpg" alt="">
            <img src="img4.jpg" alt="">
        </div>
    </div>

    </div>
</body>
</html>